<template>
  <view class="page_market">
    <view class="page_main">
      <view class="tabs">
        <view class="tabs-child" :class="index == selected ? 'on' : ''" v-for="(item, index) in types" :key="index"
          @click="onTab(index)">
          {{ item }}
        </view>
      </view>

      <view class="prices flex just-sb">
        <view class="todayPrice center-c">
          <view class="value">{{ currentValue }}</view>
          <view class="text">当日均价</view>
        </view>

        <view class="yesterdayPrice center-c">
          <view class="value">{{ yesterdayValue }}</view>
          <view class="text">昨日价格</view>
        </view>

        <view class="yesterdayValue center-c">
          <view class="value">{{ percentageChange }}</view>
          <view class="text">对比昨日</view>
        </view>
      </view>

      <view class="charts">
        <view class="title flex just-sb">
          <view class="title-left">近7日行情</view>
          <view class="title-right">元/斤</view>
        </view>

        <view class="boxs flex just-sb">
          <view class="todayPrice center-c">
            <view class="value">{{ maxValue }}</view>
            <view class="text">7日最高价</view>
          </view>

          <view class="yesterdayPrice center-c">
            <view class="value">{{ minValue }}</view>
            <view class="text">7日最低价</view>
          </view>

          <view class="yesterdayValue center-c">
            <view class="value">{{ average.toFixed(2) }}</view>
            <view class="text">7日均价</view>
          </view>
        </view>

        <view id="myEcharts" ref="myEcharts" style="height: 30vh;"></view>
      </view>

      <view class="list w100">
        <view class="title flex just-sb">
          <view class="title-left">全部行情信息</view>
          <my-date  :value.sync="offerTime"  @change="getListData()"></my-date>
        </view>

        <view class="list-header">
          <view class="list-boxs flex just-sb">
            <view class="list-boxs-view">时间</view>
            <view class="list-boxs-view">产品</view>
            <view class="list-boxs-view">价格(元/斤)</view>
            <view class="list-boxs-view">涨跌</view>
          </view>
        </view>

        <view class="list-body">
          <view class="list-boxs flex just-sb" v-for="(item, index) in List" :key="index">
            <view class="list-boxs-view">{{ item.offerTime }}</view>
            <view class="list-boxs-view">{{ item.goodName }}</view>
            <view class="list-boxs-view">{{ item.averagePrice }}</view>
            <view class="list-boxs-view">
              <image class="icon" src="/static/up.png" mode="widthFix" v-if="item.type == 'up'"></image>
              <image class="icon" src="/static/down.png" mode="widthFix" v-else></image>
              {{ item.value }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as echarts from 'echarts';
import { gateway, getAction } from '../../utils/api';
export default {
  data() {
    return {
      weekList: [],
      List: [],
      types: ['脐橙', '兔子'],
      selected: 0,
      todayPrice: 0,
      yesterdayValue: 0,
      maxValue: 0,
      minValue: 0,
      percentageChange: 0,
	  currentValue:0,
	  average:0,
      type7: 'up',
	  type: 'up',
      myChart: null,
	  offerTime:''
    }
  },
  onLoad() {
    this.getListData();
	this.getWeekData()
  },
  mounted(){
    // this.initEcharts();
  },
  methods: {
    getList() {
      let data = [
        {
          title: '脐橙',
          price: 3.86,
          type: 'up',
          value: '2.2%',
          updateTime: '2021-02-03',
          unit: '元/斤'
        },
        {
          title: '脐橙',
          price: 3.86,
          type: 'down',
          value: '2.2%',
          updateTime: '2021-02-03',
          unit: '元/斤'
        },
        {
          title: '脐橙',
          price: 3.86,
          type: 'up',
          value: '2.2%',
          updateTime: '2021-02-03',
          unit: '元/斤'
        },
        {
          title: '脐橙',
          price: 3.86,
          type: 'down',
          value: '2.2%',
          updateTime: '2021-02-03',
          unit: '元/斤'
        },
        {
          title: '脐橙',
          price: 3.86,
          type: 'down',
          value: '2.2%',
          updateTime: '2021-02-03',
          unit: '元/斤'
        },
        {
          title: '脐橙',
          price: 3.86,
          type: 'up',
          value: '2.2%',
          updateTime: '2021-02-03',
          unit: '元/斤'
        },
        {
          title: '脐橙',
          price: 3.86,
          type: 'up',
          value: '2.2%',
          updateTime: '2021-02-03',
          unit: '元/斤'
        },
        {
          title: '脐橙',
          price: 3.86,
          type: 'down',
          value: '2.2%',
          updateTime: '2021-02-03',
          unit: '元/斤'
        },
        {
          title: '脐橙',
          price: 3.86,
          type: 'up',
          value: '2.2%',
          updateTime: '2021-02-03',
          unit: '元/斤'
        },
        {
          title: '脐橙',
          price: 3.86,
          type: 'up',
          value: '2.2%',
          updateTime: '2021-02-03',
          unit: '元/斤'
        },
        {
          title: '脐橙',
          price: 3.86,
          type: 'up',
          value: '2.2%',
          updateTime: '2021-02-03',
          unit: '元/斤'
        },
        {
          title: '脐橙',
          price: 3.86,
          type: 'up',
          value: '2.2%',
          updateTime: '2021-02-03',
          unit: '元/斤'
        },
        {
          title: '脐橙',
          price: 3.86,
          type: 'up',
          value: '2.2%',
          updateTime: '2021-02-03',
          unit: '元/斤'
        },
        {
          title: '脐橙',
          price: 3.86,
          type: 'up',
          value: '2.2%',
          updateTime: '2021-02-03',
          unit: '元/斤'
        },
        {
          title: '脐橙',
          price: 3.86,
          type: 'up',
          value: '2.2%',
          updateTime: '2021-02-03',
          unit: '元/斤'
        },
        {
          title: '脐橙',
          price: 3.86,
          type: 'up',
          value: '2.2%',
          updateTime: '2021-02-03',
          unit: '元/斤'
        },
      ];

      this.list = data.map((item) => ({
        title: item.title,
        price: item.price,
        type: item.type,
        value: item.value,
        updateTime: item.updateTime,
        unit: item.unit
      }))
    },
	getWeekData(){
		let params={
				goodName:this.types[this.selected],
			}
		getAction(gateway.busscommon+'/farm/farmCropMarket/get7Day',params).then(res=>{
			// console.log(res);
			if(res.code==200){
				this.weekList=res.result.list
				this.maxValue=res.result.maxValue
				this.minValue=res.result.minValue
				this.percentageChange=res.result.percentageChange
				this.average=res.result.average
				this.currentValue=res.result.currentValue
				this.yesterdayValue=res.result.yesterdayValue
				this.initEcharts()
			}
		})
	},
	getListData(){
		let params={
				goodName:this.types[this.selected],
				offerTime:this.offerTime
			}
		getAction(gateway.busscommon+'/farm/farmCropMarket/list',params).then(res=>{
			// console.log(res);
			if(res.code==200){
				this.List=res.result.records
			}
		})
		
	},
    onTab(index) {
      this.selected = index;
	  this.getWeekData()
	  this.getListData()
    },
    initEcharts() {
      // 这里是初始化的方式，通过id查询找到你的canvas标签
      this.myChart = echarts.init(document.getElementById('myEcharts'));
      // 这里我初始化了4个数组用来存放 后端接口给我的数据
      let data = this.weekList.map(r=>r.avgPrice)
      let xData = this.weekList.map(r=>r.days?.slice(5))
	  // console.log(xData);

      // 这里开始就是echarts的配置项了
      let option = {
        // x轴数据
        xAxis: {
          type: 'category',
          data: xData,
          axisLine: {
            show: true,
            lineStyle:{
              color: '#c3c3c3',
              type: 'dashed'
            }
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        // y轴数据
        yAxis: {
          type: 'value',
          minInterval: 1,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle:{
              color: '#c3c3c3',
              type: 'dashed'
            }
          },
        },
        // 这里写2个对象是2条线条，3个则是3条
        series: [
          {
            data: data,
            type: 'line',
          },
        ],
        grid: {
          left: '8%',
          right: '2%',
          top: '10%',
          bottom: '15%',
        },
      }

      // 这里不要忘记把option设置给echarts实例
      this.myChart.setOption(option);

      // 这里是用于窗口变化时的自适应，利用的是echarts自带的resize方法
      // 如果你打印出来这个echarts实例，可以在函数里面找到这个方法
      window.addEventListener('resize', () => {
        this.myChart.resize()
      });
    },
  }
}
</script>

<style lang="less" scoped>
.page_market {
  .page_main {
    width: 694rpx;
    margin: 40rpx auto 0;
    padding: 0 0 50rpx;

    .tabs {
      width: 226rpx;
      height: 52rpx;
      background: #ffffff;
      border: 1rpx solid #628fcb;
      border-radius: 26rpx;
      margin: 0 auto;

      .tabs-child {
        width: 102rpx;
        height: 36rpx;
        line-height: 36rpx;
        border-radius: 18rpx;
        margin: 6rpx 4rpx;
        display: inline-block;
        text-align: center;
        font-size: 22rpx;
        color: #628fcb;

        &.on {
          background: #628fcb;
          color: #ffffff;
        }
      }
    }

    .prices {
      height: 162rpx;
      background: #ffffff;
      border-radius: 16rpx;
      padding: 28rpx;
      margin: 28rpx 0 0;

      .center-c {
        width: 33.3333%;
        border-left: 1px dashed #d8d8d8;

        &:first-child {
          border: 0;
        }
      }
    }

    .charts {
      background: #ffffff;
      border-radius: 16rpx;
      padding: 28rpx;
      margin: 28rpx 0 0;

      .title {
        .title-left {
          height: 61.11rpx;
          line-height: 61.11rpx;
          font-size: 27.78rpx;
          font-weight: 800;
          color: #333333;
        }

        .title-right {
          font-size: 22rpx;
          color: #999999;
          line-height: 61.11rpx;
        }
      }

      .boxs {
        margin: 10rpx 0 0;

        .center-c {
          width: 203rpx;
          height: 152rpx;
          border-radius: 16rpx;

          .text {
            font-size: 22rpx;
            color: #333333;
            line-height: 48rpx;
          }

          .value {
            font-size: 38rpx;
            font-weight: 800;
            line-height: 48rpx;
          }

          &:nth-child(1) {
            background: linear-gradient(180deg, rgba(255, 100, 100, 0.4), rgba(255, 225, 225, 0.4));

            .value {
              color: #ff6464;
            }
          }

          &:nth-child(2) {
            background: linear-gradient(180deg, rgba(98, 203, 154, 0.4), rgba(225, 255, 245, 0.4));

            .value {
              color: #62cb9a;
            }
          }

          &:nth-child(3) {
            background: linear-gradient(180deg, rgba(98, 143, 203, 0.4), rgba(225, 236, 255, 0.4));

            .value {
              color: #628fcb;
            }

            .value {
              font-size: 38rpx;
              font-weight: 800;
              color: #ff6464;
              line-height: 33.33rpx;
            }
          }
        }
      }
    }

    .list {
      background: #ffffff;
      border-radius: 16rpx;
      padding: 28rpx;
      margin: 28rpx 0 0;

      .title {
        .title-left {
          height: 61.11rpx;
          line-height: 61.11rpx;
          font-size: 27.78rpx;
          font-weight: 800;
          color: #333333;
        }
      }

      .list-header {
        background: #eff7ff;
        border-radius: 6rpx;
        margin-top: 22rpx;
      }

      .list-boxs {
        .list-boxs-view {
          width: 133rpx;
          height: 31rpx;
          font-size: 22rpx;
          color: #666666;
          text-align: center;
          height: 56rpx;
          line-height: 56rpx;

          &:nth-child(1) {
            width: 36%;
          }

          &:nth-child(2) {
            width: 22%;
          }

          &:nth-child(3) {
            width: 22%;
          }

          &:nth-child(4) {
            width: 20%;

            image {
              width: 28rpx;
              height: 20rpx;
              display: inline-block;
              vertical-align: middle;
              margin-right: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style>
